<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      label-suffix="："
      class="demo-form-inline"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="商品名称">
        <el-input v-model="formInline.name" placeholder="商品名称" />
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select
          v-model="formInline.category_id"
          placeholder="请选择商品分类"
        >
          <el-option
            v-for="item in category_list"
            :key="item.category_id"
            :label="item.category_name"
            :value="item.category_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList">查询</el-button>
        <el-button size="small" @click="reset">重置</el-button>
        <el-button type="primary" size="small" @click="addGoods"
          >添加商品</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      :header-cell-style="{
        textAlign: 'center',
        color: '#909399',
        backgroundColor: '#f8f8f8',
      }"
    >
      <el-table-column label="ID" prop="goods_id" align="center" width="50px" />
      <el-table-column
        label="商品分类"
        prop="category_name"
        align="center"
        width="100px"
      />
      <el-table-column label="商品名称" prop="goods_name" align="center" />
      <el-table-column label="商品图片" prop="goods_img" align="center">
        <template #default="{ row }">
          <el-image
            style="width: 150px; height: 120px"
            :src="$baseUrl + row.goods_img"
            fit="contain"
            :preview-src-list="[$baseUrl + row.goods_img]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="商品描述"
        prop="goods_desc"
        align="center"
        width="200px"
      />
      <el-table-column label="商品价格(￥)" prop="goods_price" align="center" />
      <el-table-column
        label="优惠金额(￥)"
        prop="goods_preferential"
        align="center"
      />
      <el-table-column label="上架时间" prop="listing_time" align="center" />
      <el-table-column label="上下架状态" prop="listing_status" align="center">
        <template #default="{ row }">
          <el-tag :type="row.listing_status == 1 ? 'success' : 'danger'">{{
            row.listing_status == 1 ? "已上架" : "已下架"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        prop="handle"
        align="center"
        fixed="right"
        width="200px"
      >
        <template #default="{ row }">
          <el-row>
            <el-col :span="24" style="margin-bottom: 10px"
              ><el-button size="mini" type="primary" @click="detail(row)"
                >查看详情</el-button
              >
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="edit(row.id)"
                type="primary"
                style="width: 80px"
                >修改</el-button
              ></el-col
            >
            <el-col :span="24">
              <el-button
                :type="row.listing_status ? 'danger' : 'primary'"
                size="mini"
                style="width: 80px"
                :icon="
                  row.listing_status ? 'el-icon-download' : 'el-icon-upload2'
                "
                @click="changeStatus(row)"
                >{{ row.listing_status ? "下架" : "下架" }}</el-button
              >
              <el-button
                size="mini"
                :type="row.is_new_add ? 'danger' : 'info'"
                style="width: 80px"
                icon="el-icon-delete"
                :disabled="row.is_new_add ? false : true"
                @click="remove_goods(row.id)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="formInline.total > 0"
      :total="formInline.total"
      :page.sync="formInline.page"
      :limit.sync="formInline.limit"
      @pagination="getList"
    />
    <!-- 详情 -->
    <Detail ref="detail" />
  </div>
</template>

<script>
import Detail from "./components/detail.vue";
import { get_goods_list } from "@/api/goods";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination, Detail },
  data() {
    return {
      listLoading: false,
      formInline: {
        total: 10,
        page: 1,
        limit: 10,
        name: "",
        category_name: "",
      },
      tableData: [],
      category_list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      await get_goods_list(this.formInline).then(({ data }) => {
        console.log("data: ", data);
        this.tableData = data.list;
        this.formInline.total = data.total;
        // 本地缓存
        let categoryData = localStorage.getItem("categoryData");
        if (categoryData == "undefined") {
          localStorage.setItem(
            "categoryData",
            JSON.stringify(data.category_list)
          );
          this.category_list = data.category_list;
        } else {
          this.category_list = JSON.parse(categoryData);
        }
        console.log("this.category_list: ", this.castegory_list);
      });
      this.listLoading = false;
    },
    detail(row) {
      this.$refs.detail.open(row);
    },
    addGoods() {
      this.$router.push("/goods/add");
    },
    edit() {},
    remove_goods() {
      this.$confirm("确认要删除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {});
    },
    changeStatus(row) {
      this.$confirm(
        `确认要${row.listing_status ? "下架" : "下架"}该商品?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {});
    },
    reset() {
      (this.formInline = {
        total: 10,
        page: 1,
        limit: 10,
        name: "",
        category_id: "",
      }),
        this.getList();
    },
  },
};
</script>

<style></style>
